
<template>
    <div class="icon-body">
        <!-- <el-input v-model="name" style="position: relative;" clearable placeholder="请选择图标(可搜索)" @focus="inputFocus" @clear="filterIcons" @input.native="filterIcons"> -->
        <el-input v-model="name" style="position: relative;" clearable placeholder="请选择图标(可搜索)" @focus="inputFocus" @blur="inputBlur" @clear="filterIcons" @input.native="filterIcons">
            <i slot="prefix" :class="showIcon"></i>
        </el-input>
        <div class="icon-list" :class="isActive?'active':''">
            <div style="width:100%">
                <el-radio-group v-model="iconGroup" @change="iconGroupChange">
                    <el-radio :label="0">Awesome</el-radio>
                    <el-radio :label="1">Element</el-radio>
                    <!-- <el-radio :label="2">备选项</el-radio> -->
                </el-radio-group>
            </div>
            <div v-for="(item, index) in icons" :key="index" @click.stop="selectedIcon(item)" class="icon-item">
                <i :class="item.className"></i>
                <span>{{item.name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import AwesomeData from "./AwesomeData";
import ElementData from "./ElementData";
// import "./record";
export default {
    data() {
        return {
            iconGroup: 0,
            icons: [],
            name: "",
            isActive: false,
            showIcon: "el-icon-search",
            // 取消
            notBack: false,
            base: [],
            timer: null,
        };
    },
    mounted() {
        this.iconGroupChange(0);
    },
    methods: {
        filterIcons() {
            let name = this.name;
            this.showIcon = "el-icon-search";
            this.emitValue(["", ""]);
            if (name) {
                let icons = this.base.slice(0, 200);
                this.icons = icons.filter(
                    (icon) => icon.className.indexOf(name) != -1
                );
            } else {
                this.icons = this.base.slice(0, 200);
            }
        },
        selectedIcon(item) {
            this.name = item.name;
            this.emitValue([item.className, item.name]);
            this.showIcon = item.className;
        },
        inputFocus() {
            this.isActive = true;
        },
        inputBlur() {
            setTimeout(() => {
                if (!this.notBack) {
                    this.isActive = false;
                }
            }, 100);
        },
        emitValue(value) {
            this.$emit("changeIconClassName", value);
        },
        iconGroupChange(label) {
            clearInterval(this.timer);
            this.notBack = true;
            if (label == 0) {
                this.base = JSON.parse(JSON.stringify(AwesomeData));
            } else if (label == 1) {
                this.base = JSON.parse(JSON.stringify(ElementData));
            }
            this.icons = this.base.slice(0, 200);
            this.timer = setTimeout(() => {
                this.notBack = false;
            }, 1000);
        },
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.icon-body {
    width: 100%;
    position: relative;
    .icon-list {
        height: 200px;
        overflow-y: scroll;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        min-width: 150px;
        border-radius: 4px;
        border: 1px solid #e6ebf5;
        padding: 12px;
        color: #606266;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        visibility: hidden;
        transition: all 0.1s;
        z-index: -1;
        position: absolute;
        width: 90%;
        background-color: #fff;
        &.active {
            visibility: visible;
            z-index: 999;
        }
        .icon-item {
            cursor: pointer;
            width: 33%;
        }
    }
    & >>> .el-input__prefix {
        color: #000;
        left: 10px;
    }
}
</style>
